<script setup lang="ts">
import MyDialog from '@/assets/components/Dialog.vue'
import { MenuType, Note as NoteClass, NoteContent } from '@/views/desktop/type'
import { inject, ref } from 'vue'
import System from '@/views/desktop/widget/System.vue'
import { insert } from '@/api/desktop/NoteApi.ts'
import Note from '@/views/desktop/widget/Note.vue'

const props = defineProps({
  fullScreen: Boolean,
  menu: MenuType,
  width: String,
  title: String,
})
let dialogVisible = inject('dialogVisible')
let initDesk = inject('initDesk')

const tabs = ref([
  {
    label: '系统应用',
    name: '100000000301',
    widgets: [{ id: '2', widget: System }],
  },
  {
    label: '挂件',
    name: '100000000303',
    widgets: [{ id: '1', widget: Note }],
  },
])
const activeName = ref('100000000303')
const handleClick = (tab, event: Event) => {
  console.log(tab, event)
}
const addHandler = (item) => {
  let note = new NoteClass()
  note.title = '便签'
  let noteContent = new NoteContent()
  noteContent.content = '便签内容'
  noteContent.sort = 1
  note.noteContentList = [noteContent]

  insert(note).then(() => {
    dialogVisible.value[props.menu.id] = false
    initDesk()
  })
}
</script>

<template>
  <div>
    <my-dialog :menu="props.menu" :title="props.title">
      <div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane
            v-for="item in tabs"
            :label="item.label"
            :name="item.name"
          >
            <div class="w-1/3" v-for="widget in item.widgets">
              <p class="text-right pb-1">
                <el-button type="primary" @click="addHandler(widget)">
                  添加
                </el-button>
              </p>
              <component :is="widget.widget"></component>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </my-dialog>
  </div>
</template>

<style scoped></style>
